<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>var module = {};</script>
    <script src="https://cdn.bootcss.com/socket.io/2.1.1/socket.io.dev.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script src="../IMServer/config/serverConfig.js"></script>
    <script>
        localStorage.debug = '*';
        let idMap = {
            "111":"5bf45b485274fe45685286d4",
            "222":"5bf45b485274fe45685286d5",
        };
        let memMap = {
            "111":"王鹏",
            "222":"常庆顺",
        };
        let idNameMap = {
            "5bf45b485274fe45685286d4":"王鹏",
            "5bf45b485274fe45685286d5":"常庆顺",
        };
        let socket = io(ServerConfig.ip+':4000/socketChat');
        socket.on('connected', function (data) {
        });
        socket.on('11001', function (data) {
            console.log(data);
        });
        socket.on('12002', function (data) {
            $("#show").append("<div><span style='color:red'>"+idNameMap[data.data.sendMemId]+":&nbsp;</span>"+data.data.chatData+"</div><br/>");

            var ele = document.getElementById('show');
            ele.scrollTop = ele.scrollHeight;
        });
        socket.on('11003', function (data) {
            alert(data);
        });
        function login(){
            $("#loginBtn").attr("disabled","disabled");
            socket.emit('11000',
                {
                    data:{
                        username:$("#meName").val(),
                    },
                    smid:new Date().getTime()
                }
            );
        }
        function send(){
            let msgVal = $("#editArea").val();
            let senderVal = $("#meName").val();
            //let receiverVal = $("#toName").val();
            socket.emit('12000',
                {
                    data:{
                        id: (new Date()).getTime(),
                        chatID: "5bf4716ef9536f58b498ffaa",
                        chatMsgType: "30001",
                        chatData: msgVal,
                        sendMemId: idMap[senderVal],
                        sendTime: (new Date()).getTime(),
                        serverReceiveTime: "",
                        status: "1",
                    },
                    smid:new Date().getTime()
                }
            );
            $("#show").append("<div><span style='color:blue'>"+idNameMap[idMap[senderVal]]+":&nbsp;</span>"+msgVal+"</div><br/>");
            var ele = document.getElementById('show');
            ele.scrollTop = ele.scrollHeight;
            $("#editArea").val("");
        }
    </script>
</head>
<body style="">
当前用户:<span id="showName"></span>
    <input type="hidden" id="meName" />
    <div id="show" style="height: 500px; overflow: auto" >

    </div>
    <textarea id="editArea"></textarea>
    <button onclick="send()">發送</button>
    <script>
        function getQueryVariable(variable)
        {
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i=0;i<vars.length;i++) {
                var pair = vars[i].split("=");
                if(pair[0] == variable){return pair[1];}
            }
            return(false);
        }
        $(function(){
            var tempMemId = getQueryVariable('name');
            $("#meName").val(tempMemId);
            $("#showName").html(memMap[tempMemId]);
            login();
        });
    </script>
</body>
</html>